<template>
  <!-- ApplyCooperation 申请合作 -->
  <PageContainer>
    <view class="container">
      <Header title="合作管理" :isBoxShadow="false" />
      <Association showDesc :info="info" />

      <view class="mx-15 px-15 bgf mt-15 cardBox">
        <view>
          <view class="py-8 disFlxJS">
            <view>
              <text class="fz-16 fw-7">资源接入</text>
              <text class="fz-12 pl-7">
                (共
                <text class="color1 px-3">{{ joinSum }}</text>
                项,已接入
                <text class="color1 px-3">{{ joinList.length }}</text>
                项)
              </text>
            </view>
            <view class="fz-12 addBtn" @click="openProp(CooperationTypeEnum.INSERT)">
              <text>我要接入</text>
            </view>
          </view>
          <view class="borderBottom fz-12 pb-8 color2">将对方资源展示在我的资源列表中</view>
        </view>

        <template v-if="!joinList.length">
          <view class="disFlxCC fz-14 color2" style="height: 300rpx">暂未接入资源</view>
        </template>
        <template v-else>
          <template v-for="(item, index) in joinList" :key="index">
            <view
              class="linh-50 disFlxJS"
              :class="[index < joinList.length - 1 && 'borderBottom']"
              @click.stop="goDetails(item.id)"
            >
              <view class="disFlxAC">
                <view class="fz-14">{{ (item.projectName ?? '') }}</view>
                <view class="statusTag tag1" v-if="item.apStatus === AuditStatusEnum.UNREVIEWED">
                  待审核
                </view>
                <view class="statusTag tag2" v-if="item.apStatus === AuditStatusEnum.PASSED">
                  已合作
                </view>
              </view>
              <view>
                <text class="ali-icon fz-28 color2">&#xe6c7;</text>
              </view>
            </view>
          </template>
        </template>
      </view>

      <view class="mx-15 px-15 bgf mt-15 cardBox">
        <view>
          <view class="py-8 disFlxJS">
            <view>
              <text class="fz-16 fw-7">资源推送</text>
              <text class="fz-12 pl-7">
                (共
                <text class="color1 px-3">{{ pushSum }}</text>
                项,已推送
                <text class="color1 px-3">{{ pushList.length }}</text>
                项)
              </text>
            </view>
            <view class="fz-12 addBtn" @click="openProp(CooperationTypeEnum.PUSH)">
              <text>我要推送</text>
            </view>
          </view>
          <view class="borderBottom fz-12 pb-8 color2">将我的资源推广到对方资源列表中</view>
        </view>
        <template v-if="!pushList.length">
          <view class="disFlxCC fz-14 color2" style="height: 300rpx">暂未推送资源</view>
        </template>
        <template v-else>
          <template v-for="(item, index) in pushList" :key="index">
            <view
              class="linh-50 disFlxJS"
              :class="[index < pushList.length - 1 && 'borderBottom']"
              @click.stop="goDetails(item.id)"
            >
              <view class="disFlxAC">
                <view class="fz-14">{{ (item.projectName ?? '') }}</view>
                <view class="statusTag tag1" v-if="item.apStatus === AuditStatusEnum.UNREVIEWED">
                  审核中
                </view>
                <view class="statusTag tag2" v-if="item.apStatus === AuditStatusEnum.PASSED">
                  已合作
                </view>
              </view>
              <view>
                <text class="ali-icon fz-28 color2">&#xe6c7;</text>
              </view>
            </view>
          </template>
        </template>
      </view>

      <UniPopup ref="resources" type="bottom">
        <view class="bgf py-15">
          <view class="fontTC fz-16 fw-7">
            请选择{{
              postData.cooperationType === CooperationTypeEnum.PUSH ? '推送' : '接入'
            }}的资源
          </view>
          <view class="fontTC fz-12 color2 py-11">
            共{{ resourcesList.length }}项资源可{{
              postData.cooperationType === CooperationTypeEnum.PUSH ? '推送' : '接入'
            }}
          </view>
          <scroll-view scroll-y class="contact_scroll">
            <view
              class="linh-50 disFlxJS borderBottom mx-15"
              v-for="v in resourcesList"
              :key="v.type"
              @click.stop="changeChecked(v)"
            >
              <view class="leftBox ov-1">{{ v.name }}</view>
              <view>
                <image
                  v-if="v.checked"
                  src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/radio-checked2.png"
                  style="width: 40rpx; height: 40rpx; display: block"
                />
                <image
                  v-else
                  src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/radio.png"
                  style="width: 40rpx; height: 40rpx; display: block"
                />
              </view>
            </view>
          </scroll-view>
          <view class="mt-15 mx-15">
            <button
              type="primary"
              :disabled="postData.typeList.length === 0"
              class="btn"
              @click.stop="confirmAdd"
            >
              确认选择
            </button>
          </view>
        </view>
      </UniPopup>

      <TButtonGroup v-if="!isFastApply">
        <TButton class="gutter-btn" text="快速申请合作" :type="'primary'" @click="addInvitation" />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  ApplyCooperation  申请合作 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import Association from '../components/association.vue';
  import { ref, unref, reactive, getCurrentInstance } from 'vue';
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import {
    addCooperationInvitation,
    getApInfoList,
    getResourcesList,
    isSetPlay,
  } from '@/api/cooperation';
  import { type ResourcesList } from '@/api/cooperation/types';
  import {
    AuditStatusEnum,
    CooperationProjectTypeEnum,
    CooperationTypeEnum,
    TabsListValueEnum,
  } from '@/enums/cooperationEnum';
  import { navigateTo } from '@/router';
  import { onShow } from '@dcloudio/uni-app';
  import { Toast } from '@/utils';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';

  const info = uni.getStorageSync('_CLICK_INFO');
  interface ListData {
    id: number;
    projectType: CooperationProjectTypeEnum;
    projectName: string;
    apStatus: AuditStatusEnum;
  }
  const joinList = ref<ListData[]>([]); // 已接入数组
  const joinSum = ref<number>(0); // 接入总数
  const pushList = ref<ListData[]>([]); // 已推送数组
  const pushSum = ref<number>(0); // 推送总数
  /** 是否已申请快速合作 */
  const isFastApply = ref<boolean>(true);
  const getData = function () {
    getApInfoList(info.tenantId).then((res) => {
      joinList.value = res?.joinList ?? [];
      joinSum.value = res?.getJoinSum ?? 0;
      pushList.value = res?.pushList ?? [];
      pushSum.value = res?.getPushSum ?? 0;
      isFastApply.value = res.isFastApply;
    });
  };

  onShow(async () => {
    getData();
  });

  const resourcesList = ref<ResourcesList[]>([]);
  const postData = reactive({
    tenantId: info.tenantId,
    cooperationType: 1,
    typeList: <number[]>[],
  });
  const _this = getCurrentInstance();
  const openProp = async (cooperationType: number) => {
    if (
      cooperationType === CooperationTypeEnum.INSERT &&
      unref(joinList).length === unref(joinSum)
    ) {
      Toast('暂无可接入的资源', 'none');
      return;
    } else if (
      cooperationType === CooperationTypeEnum.PUSH &&
      unref(pushList).length === unref(pushSum)
    ) {
      Toast('暂无可推送的资源', 'none');
      return;
    }
    // await isSetPlay(info.tenantId); // 判断是否开通支付
    postData.cooperationType = cooperationType;
    postData.typeList = [];
    resourcesList.value = [];
    // 获取资源列表
    const res = await getResourcesList({ cooperationType, tenantId: info.tenantId });
    res.forEach((v, i) => {
      v.checked = false;
      resourcesList.value.push(v);
    });

    (_this?.refs['resources'] as any).open();
  };

  const changeChecked = function (v: ResourcesList) {
    v.checked = !v.checked;
    postData.typeList = unref(resourcesList)
      .filter((v) => v.checked)
      .map((v) => v.type);
  };

  // 确认添加
  const confirmAdd = function () {
    (_this?.refs['resources'] as any).close();
    navigateTo({
      name: 'confirmCooperation',
      options: postData,
    });
  };
  // 跳转合作详情
  const goDetails = function (id: number) {
    navigateTo({ name: 'cooperationDetails', options: { id } });
  };

  function addInvitation() {
    addCooperationInvitation(info.tenantId).then(({ id }) => {
      getData();
      navigateTo({
        name: 'cooperationResult',
        options: { ids: [id], type: TabsListValueEnum.QUICK_APLIST },
      });
    });
  }
</script>

<style lang="scss" scoped>
  $color-primary: #2878ff;
  $color-warning: #ffa944;
  $color-text: #aaabab;

  .color1 {
    color: $color-primary;
  }

  .color2 {
    color: $color-text;
  }

  .cardBox {
    border-radius: 20rpx;

    .addBtn {
      color: $color-primary;
      border: solid 1px $color-primary;
      border-radius: 10rpx;
      width: 150rpx;
      height: 48rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .statusTag {
      font-size: 20rpx;
      height: 32rpx;
      line-height: 32rpx;
      width: 96rpx;
      text-align: center;
      border-radius: 10rpx;
      margin-left: 20rpx;
    }

    .tag1 {
      color: $color-primary;
      background-color: #d0f7ff;
    }

    .tag2 {
      color: $color-warning;
      background-color: #fff4e7;
    }
  }

  .contact_scroll {
    max-height: 40vh;
    box-sizing: border-box;

    .leftBox {
      max-width: 70%;
    }
  }

  .btn {
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 20rpx;
  }
</style>
